import React, { Component } from 'react'
import cs from 'classnames'
import { withRouter } from 'react-router-dom'

import {
  Icon
} from 'antd'
import {
  NavBar
} from 'antd-mobile'

import style from './index.less'

@withRouter
export default class App extends Component {
  handleBack = e => {
    e.preventDefault()

    const { onBack } = this.props

    if (onBack instanceof Function) {
      onBack()
    } else {
      this.props.history.goBack()
    }
  }

  render () {
    const {
      title,
      children,
      className,
      mode = 'light',

      leftContent,
      rightContent,

      onBack,

      ...rest
    } = this.props

    return (
      <NavBar
        className = {
          cs(
            style['header'],
            className
          )
        }
        icon = { <Back onClick = { this.handleBack } /> }

        leftContent = { leftContent }
        rightContent = { rightContent }

        mode = { mode }
      >
        { title }
      </NavBar>
    )
  }
}

const Back = props => (
  <div className = { style['back'] } onClick = { props.onClick } />
)
